<template>
	<view class="">
		<view class="pr z2 br36 flex_x ovh" :style="{'height':height +'rpx','background':bgColor}">
			<view class="flex1 flex_x pl30">
				<view class="flex1 mr20">
					<u--input :disabled='disabled' :disabledColor='disabledColor' prefixIcon="search"
						:prefixIconStyle="`font-size: 24px;color: ${icon_c}`" :placeholder="placeholder"
						@change='change' placeholderStyle="font-size:28rpx;color:#909090" border="none"
						v-model="search_text"></u--input>
				</view>
			</view>
			<view class="search_btn br36 bgc cf fw500 fs28 flex_c mr4" @click="search" v-if="is_btn">搜索</view>
		</view>

		<!-- 使用
		 <searchBox :search_cont.sync='search_cont' @search='search'></searchBox>
		 -->
	</view>
</template>

<script>
	export default {
		props: {
			icon_c: { //搜索颜色
				default: () => '#F00796'
			},
			search_cont: { //搜索默认值
				default: () => ''
			},
			placeholder: { //placeholder 提示文字
				default: () => '请输入商品关键词'
			},
			height: { //高度
				default: () => '64'
			},
			bgColor: { //背景颜色
				default: () => '#F5F5F5'
			},
			is_btn: { //是否展示搜索按钮
				default: () => true
			},
			disabled: { //是否禁用输入框
				default: () => false
			},
			disabledColor: { //禁用状态时的背景色
				default: () => '#fff'
			}
		},
		components: {},
		data() {
			return {
				search_text: '', //搜索文字
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			search() { //搜索
				this.$emit('update:search_cont', this.search_text)
				this.$emit('search', this.search_text)
			},
			change(e) { //change事件
				// console.log(e);
				this.$emit('update:search_cont', e)
				this.$emit('change', e)
			}
		},
		computed: {

		},
		watch: {
			search_cont: {
				handler(news, old) {
					this.search_text = news
				},
				deep: true,
				immediate: true,
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search_btn {
		width: 100upx;
		height: 60upx;
	}
</style>